<template>
  <el-dialog
  :title="title" @close="close"
  custom-class="lnglat-select-layer" append-to-body width="1000px"
  :visible="visible"   :close-on-click-modal="false">
     <main-map height="600px" :options="options" 
      @map-loaded="mapLoaded" 
      @item-select="itemSelect" >
     </main-map>
</el-dialog>
</template>
<script>
import { getMd5FilePath } from '@/utils/common';
export default {
  props: ['lng', 'lat'],
  name: 'LnglatSelect',
  data() {
    return {
      title: '位置选择',
      visible: false,
      infoWindow: null,
      marker: null,
      map: null,
      AMap: null,
      address: '',
      lnglat: null,
      options: {

      }
    };
  },
  computed: {
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    }
  },
  watch: {
    layoutSkin() {
      if (this.infoWindow) {
        const lnglat = this.map.getCenter();
        const content = this.setWindowInfoContent(lnglat);
        const markerConten = this.setMarkerContent();
        this.infoWindow.setContent(content);
        this.marker.setContent(markerConten);
      }
    }
  },
  methods: {
    itemSelect(item) {
      console.log(`item`, item);
      var geocoder = new AMap.Geocoder();
      const lnglat = item.location;
      this.marker.setPosition(lnglat);
      this.infoWindow.setPosition(lnglat);
      geocoder.getAddress(lnglat, (status, result) => {
        if (status === 'complete' && result.regeocode) {
          this.address = result.regeocode.formattedAddress;
        } else {
          console.error('根据经纬度查询地址失败');
        }
        const { lat, lng } = lnglat;
        this.$emit('getLocation', {
          lat, lng,
          address: this.address
        });
      });
    },
    mapLoaded(map, AMap) {
      this.map = map;
      this.AMap = AMap;
      this.lnglat = map.getCenter();
      if (this.lng && this.lat) {
        this.lnglat = new AMap.LngLat(this.lng, this.lat);
        this.map.setCenter([this.lng, this.lat]); // 设置地图中心点
      }

      this.marker = new AMap.Marker({
        position: this.lnglat,
        content: this.setMarkerContent(),
        offset: new AMap.Pixel(-15, -32),
        draggable: true,
        cursor: 'move'
        // 设置拖拽效果
        // raiseOnDrag: true
      });
      this.map.add(this.marker);
      this.addWindowInfo(this.lnglat);

      map.on('click', e => {
        console.log('e', e);
        const lnglat = e.lnglat;
        const content = this.setWindowInfoContent(lnglat);
        this.marker.setPosition(lnglat);
        this.infoWindow.setPosition(lnglat);
        this.infoWindow.setContent(content);
        this.getAddress(lnglat);
      });

      // this.marker.on('dragstart', e => {
      //   this.map.remove(this.infoWindow);
      // });

      // this.marker.on('dragging', e => {
      //   this.marker.setOffset(new AMap.Pixel(-15, -32));
      // });

      // this.marker.on('dragend', e => {
      //   const lnglat = e.lnglat;
      //   this.addWindowInfo(lnglat);
      //   this.marker.setPosition(lnglat);
      //   // this.$emit('getLocation', {
      //   //   lat, lng,
      //   //   zoom: map.getZoom()
      //   // });
      // });
      // map.on('mapmove', _ => {
      //   const lnglat = map.getCenter();
      //   const content = this.setWindowInfoContent(lnglat);
      //   this.marker.setPosition(lnglat);
      //   this.infoWindow.setPosition(lnglat);
      //   this.infoWindow.setContent(content);
      //   this.getAddress();
      // });
    },
    addWindowInfo(lnglat) {
      const AMap = this.AMap;
      this.infoWindow = new AMap.Marker({
        clickable: false, // 点位是否可点击
        offset: new AMap.Pixel(0, -146), // 设置点标记偏移量
        position: lnglat,
        content: this.setWindowInfoContent(lnglat)
      });
      this.map.add(this.infoWindow);
    },
    setWindowInfoContent(lnglat) {
      const html = `<div class="cus-window-info cus-window-info--bg_light" style="background-image: url(${getMd5FilePath(`/static/images/base/bg_light.png`)})">
                <div class="lng">经度：${lnglat.lng}</div>
                <div class="lat">纬度：${lnglat.lat}</div>
                <div class="tip">鼠标点击地图选择位置</div> 
        </div>`;
      return html;
    },
    setMarkerContent() {
      const icon = this.layoutSkin === 'dark' ? 'dwdark' : 'dwlight';
      return `<svg class="point-icon" aria-hidden="true" ><use xlink:href="#icon-${icon}"></use></svg>`;
    },
    getAddress(lnglat) {
      var geocoder = new AMap.Geocoder();
      geocoder.getAddress(lnglat, (status, result) => {
        if (status === 'complete' && result.regeocode) {
          this.address = result.regeocode.formattedAddress;
        } else {
          console.error('根据经纬度查询地址失败');
        }
        const { lat, lng } = lnglat;
        this.$emit('getLocation', {
          lat, lng,
          address: this.address
        });
      });
    },
    openDialog() {
      this.visible = true;
      if (this.map) {
        if (this.lng && this.lat) {
          this.lnglat = new this.AMap.LngLat(this.lng, this.lat);
          const content = this.setWindowInfoContent(this.lnglat);
          this.marker.setPosition(this.lnglat);
          this.infoWindow.setPosition(this.lnglat);
          this.infoWindow.setContent(content);
          this.map.setCenter([this.lng, this.lat]); // 设置地图中心点
        }
      }
    },
    close() {
      this.visible = false;
    }
  }
};
</script>

<style lang="scss">
.lnglat-select-layer{
  .amap-info-close{
    display: none !important;
  }
  .el-dialog__header{
    padding: 8px;
    .el-dialog__title{
      font-size: 16px;
    }
    .el-dialog__headerbtn{
      top:12px;
    }
  }
  .el-dialog__body{
     padding: 0;
  }
  .point-icon {
    width: 30px;
    height: 32px;
    fill: currentColor;
    overflow: hidden;
  }
   .cus-window-info{
    background-repeat:no-repeat no-repeat;
    background-size: 100% 100%; 
    height: 116px;
    width: 213px;

     .lng,.lat{
       padding-top: 10px;
       color: black;
     }

    .lat{
       padding-top: 5px;
    }
    &>div{
      padding-left: 40px;
    }

    .tip{
      padding-top:5px;
      color: #045097;
    }

   
  }
}
</style>